<template>
    <div>
        <page-main>
            <!-- 筛选栏 -->
            <search-bar>
                <el-form :model="search" size="small" label-width="100px">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="线索获取时间">
                                <el-date-picker
                                    v-model="search.date"
                                    type="daterange"
                                    range-separator="-"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    @change="handleDateChange"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="人员部门">
                                <el-cascader
                                    :props="props"
                                    :show-all-levels="false"
                                    :options="departMember"
                                    style="width: 100%;"
                                    @change="handleMemberChange"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="来源渠道">
                                <el-select v-model="search.from" placeholder="请选择">
                                    <el-option
                                        v-for="item in dict.from_list"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item>
                                <el-button type="primary" @click="getList">查询</el-button>
                                <el-button @click="handleReset">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </search-bar>
        </page-main>
        <page-main>
            <!-- 表格 table -->
            <el-table ref="table" v-loading="loading" :data="dataList" border stripe highlight-current-row @selection-change="selectionDataList = $event">
                <el-table-column prop="name" label="来源渠道" />
                <el-table-column prop="total" label="线索总数" />
                <el-table-column prop="level0" label="未选等级">
                    <template #default="scope">
                        <span>{{ `${scope.row.level0}（${scope.row.level0_rate}%）` }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="level1" label="1星：有条件了解为主">
                    <template #default="scope">
                        <span>{{ `${scope.row.level1}（${scope.row.level1_rate}%）` }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="level2" label="2星：有需求但不着急">
                    <template #default="scope">
                        <span>{{ `${scope.row.level2}（${scope.row.level2_rate}%）` }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="level3" label="3星：近两个月有需求">
                    <template #default="scope">
                        <span>{{ `${scope.row.level3}（${scope.row.level3_rate}%）` }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="level4" label="4星：需求明确当月就要办好">
                    <template #default="scope">
                        <span>{{ `${scope.row.level4}（${scope.row.level4_rate}%）` }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </page-main>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { qudaozhiliang } from '@/api/analysis'
import { departMember } from '@/api/system'
export default {
    name: 'List',
    filters: {
        typeFilter(val) {
            const map = {
                1: '体验',
                2: '新购',
                3: '增购',
                4: '复购'
            }
            return map[val]
        },
        statusFilter(val) {
            const map = {
                1: '进行中',
                2: '已完成'
            }
            return map[val]
        }
    },
    data() {
        return {
            loading: false,
            search: {
                type: '1',
                start: '',
                end: '',
                from: '',
                memberIds: ''
            },
            props: { multiple: true, value: 'id', label: 'name', children: 'child' },
            departMember: [],
            dataList: []
        }
    },
    computed: {
        ...mapState(["dict"])
    },
    mounted() {
        this.getOptions();
        this.getList();
    },
    methods: {
        // 切换分页size
        handleSizeChange(val) {
            this.search.limit = val;
            this.getList();
        },
        // 切换页数
        handleCurrentChange(val) {
            this.search.pages = val;
            this.getList();
        },
        // 重置筛选条件
        handleReset() {
            this.search.start = '';
            this.search.end = '';
            this.search.memberIds = '';
            this.search.pages = 1;
            this.getList();
        },
        // 获取列表
        getList() {
            this.loading = true;
            qudaozhiliang(this.search).then(res => {
                if (res.status == 1) {
                    this.dataList = res.data.list || [];
                }
                this.loading = false;
            })
        },
        // 获取 options
        getOptions() {
            departMember().then(res => {
                this.departMember = res.data.list || []
            })
        },
        handleDateChange(e) {
            this.search.start = e ? e[0] : ''
            this.search.end = e ? e[1] : ''
        },
        handleMemberChange(e) {
            if (e.length) {
                let arr = [];
                e.forEach(item => {
                    arr.push(item[item.length - 1])
                })
                this.search.memberIds = arr.join(',')
            } else {
                this.search.memberIds = []
            }
        }
    }
}
</script>
